<template>
  <div class="home_page">
    <div class="banner">
      <template>
        <el-carousel height="550px" :interval="4000" arrow="always">
          <el-carousel-item v-for="(item, index) in banner_image" :key="index">
            <el-image style="height:inherit;" :src="item.url"></el-image>
          </el-carousel-item>
        </el-carousel>
      </template>
    </div>

    <div class="content">
      <!-- 投资加盟 -->
      <section class="investment">
        <p class="p1">加盟投资</p>
        <p class="p2">5个大品类，50个品种，外卖与堂食自由切换</p>
        <div class="show">
          <div class="table">
            <div
              v-for="(item, index) in table_options"
              :key="index"
              :class="[
                index === 0 || index === 1 ? 'line01' : '',
                index === 2 ||
                index === 3 ||
                index === 4 ||
                index === 5 ||
                index === 6
                  ? 'line03'
                  : '',
                index === 7 || index === 8 ? 'line08' : ''
              ]"
            >
              <div
                v-for="(data, indexs) in item"
                :key="indexs"
                :class="[
                  'line01_item',
                  indexs !== '1' ? 'width_special_item' : '',

                  index === 1 && indexs === '1' ? 'special_item' : '',
                  index === 4 && indexs === '1' ? 'special_item' : ''
                ]"
              >
                {{ data }}
                <br />
                <span v-if="index === 1 && indexs === '1'"
                  >（按42%毛利率计算）</span
                >
                <span v-if="index === 4 && indexs === '1'">（水，电，煤）</span>
              </div>
            </div>
          </div>
          <div class="tips">
            <div class="img">
              <el-image fit="cover" :src="tips_image" alt></el-image>
            </div>
            <div class="warning">
              <div class="line01">加盟须知</div>
              <div class="content">
                <p
                  v-for="(item, index) in investment_warning_options"
                  :key="index"
                >
                  {{ item }}
                </p>
              </div>
              <a @click="to_join" class="more" href="javascript:;">查看更多</a>
            </div>
          </div>
        </div>
      </section>

      <!-- 品牌背景 -->
      <section ref="background" class="background">
        <!-- 标题 -->
        <p class="p1">品牌背景</p>

        <!-- 副标题 -->
        <p class="p2">
          包子是中国的传统特色小吃，具有特殊的传承意义，在快节奏的今天，三两更愿意慢下来专心做好食。
          <br />传统手作、热乎现蒸，数以100次访店，1000次的反复测试，只为找到黄金配比、最佳口感。
          <br />三两将每份包子做到极 致，为您传递包子的本真味道。
        </p>

        <!-- 简介 -->
        <div class="simpleDetail">
          <div class="detailStyle">
            <div v-for="(item, index) in countTo_item" :key="index">
              <countTo
                :start-val="item.start_val"
                :end-val="item.end_val"
                :duration="item.duration"
                ref="number_start"
                class="countTo"
              ></countTo
              >{{ item.units }}
              <div>{{ item.content }}</div>
            </div>
          </div>
        </div>

        <!-- 视频播放 -->
        <div class="video">
          <video-player
            class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :playsinline="true"
            :options="playerOptions"
          ></video-player>
        </div>
      </section>

      <!-- 品牌新闻 -->
      <section class="news">
        <p class="p1">品牌新闻</p>
        <p class="p2">
          “晨间一餐饭，从容三两人”，在慌忙节奏生活中从容享受这一餐，天然信赖、家庭简餐
        </p>

        <div class="news_over_view">
          <div
            v-for="(item, index) in news_over_view"
            :key="index"
            class="tips"
          >
            <div class="img">
              <img :src="item.journalism_image" alt />
            </div>
            <div class="warning">
              <div class="line01">{{ item.journalism_title }}</div>
              <div class="content">
                <p v-html="item.journalism_content"></p>
              </div>
            </div>
            <div class="date_more">
              <span class="date">{{ item.journalism_time }}</span>
              <a @click="to_detail(item)" class="more" href="javascript:;"
                >查看更多</a
              >
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import countTo from "vue-count-to";
import { videoPlayer } from "vue-video-player";
import "video.js/dist/video-js.css";
import { fetchBanner, fetchNews } from "../api/api";
import moment from "moment";

export default {
  data() {
    return {
      bannerParams: {
        type: "banner"
      },
      // 视频弹窗的设置
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        // fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", // 类型
            src:
              "https://ugcbsy.qq.com/uwMROfz2r57AoaQXGdGnC2deB3dYv4oNCBdVbCXSmvjDwMX6/szg_13031849_50001_289f2df230bf44c696715e1cd0fbd69d.f622.mp4?sdtfrom=v1010&guid=1931ac346af28b417856091c1b4d93ce&vkey=F314CD153ECE9FD5BE2800F97BA9F0765963CD9E5568E8B34E06BCBD0110A1283363A1C3A7B288D1E85F0DA9D2D39A5FB73F44B2EFB1BC874B9E954CE4722C91831DB3C70FBA55E61DD22E560144F02E0B8E8370306B93483AE8C7BE769975FDC45EEE4BBDE8017D122F247FE6B818F7349DAD7B795ECDD254A295E065BFE143" // url地址
          }
        ],
        poster: "", // 封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      },
      duration_time: 4000,
      endval: [5, 2, 360, 2],
      countTo_item: [
        {
          units: "+",
          start_val: 0,
          end_val: 0,
          duration: this.duration_time,
          content: "全国经营门店"
        },
        {
          units: "年",
          start_val: 0,
          end_val: 0,
          duration: this.duration_time,
          content: "餐饮研发团队"
        },
        {
          units: "°",
          start_val: 0,
          end_val: 0,
          duration: this.duration_time,
          content: "全方位经营指导"
        },
        {
          units: "年",
          start_val: 0,
          end_val: 0,
          duration: this.duration_time,
          content: "公司成立时间"
        }
      ],
      start_val: 0,
      end_val01: 5,
      end_val02: 2,
      end_val03: 360,
      end_val04: 2,
      duration: 3000,
      nav_options: [
        { key: 1, url: "", content: "关于我们" },
        { key: 2, url: "", content: "产品" },
        { key: 3, url: "", content: "品牌新闻" },
        { key: 4, url: "", content: "门店" },
        { key: 5, url: "", content: "加盟" }
      ],
      table_options: [
        {
          1: "日均营业额",
          2: "4,000元/天",
          3: "3,000元/天",
          4: "2,000元/天"
        },
        {
          1: "月销售毛利润",
          2: "50,000元/天",
          3: "37,800元/天",
          4: "25,200元/天"
          // 5: "（按42%毛利率计算）"
        },
        {
          1: "租金成本",
          2: "7,000元/天",
          3: "6,000元/天",
          4: "5,000元/天"
        },
        {
          1: "人工成本",
          2: "10,000元/天",
          3: "8,000元/天",
          4: "7,000元/天"
        },
        {
          1: "制作费用",
          2: "4,500元/天",
          3: "3,500元/天",
          4: "2,500元/天"
          // 5: "（水，电，煤）"
        },
        {
          1: "其他费用",
          2: "3,500元/天",
          3: "3,000元/天",
          4: "2,000元/天"
        },
        {
          1: "月费用合计",
          2: "25,000元/天",
          3: "20,500元/天",
          4: "16,500元/天"
        },
        {
          1: "月利润",
          2: "25,400元/天",
          3: "17,300元/天",
          4: "8,700元/天"
        },
        {
          1: "年利润",
          2: "304,800元/天",
          3: "207,600元/天",
          4: "104,400元/天"
        }
      ],
      investment_warning_options: [
        "能全身心的投入这个项目",
        "渴望成功 有较强的品牌意识及长远的发展眼光",
        "有创业的决心及承担投资风险的能力",
        "具备一定的投资资金及流动资金",
        "具有基本的经营管理和协调能力"
      ],
      date01: "2019-10-11",
      date02: "2019-10-29",
      date03: "2019-10-11",
      tips_image: require("../assets/homepage/image/组18.jpg"),
      // news_over_view: [
      //   {
      //     url: require("../assets/homepage/image/组19.jpg"),
      //     title: "三两—认真做包子致敬匠心",
      //     content:
      //       "一想到包子，就觉得是很温暖的食物，热气腾腾，让人心生暖意,虽然看似简单平凡 ,却最能撩拨人心，特别是热爱面食的胶东人。",
      //     date: "2019-10-11"
      //   },
      //   {
      //     url: require("../assets/homepage/image/组20.jpg"),
      //     title: '"三小时"报废原则',
      //     content:
      //       "三两的包子遵循“三小时”报废的售卖原则，超过3小时未售出的包子，我们将禁止销售。追求包子的[最佳赏味期]",
      //     date: "2019-10-29"
      //   },
      //   {
      //     url: require("../assets/homepage/image/组21.jpg"),
      //     title: "找回记忆中得味道",
      //     content:
      //       "而如今，机器制造逐渐代替传统手工，揉揉捏捏，皮包上馅，甚至把面粉馅料倒进机器，一键即可成型。",
      //     date: "2019-10-11"
      //   }
      // ],
      banner_image: [],
      news_over_view: ""
    };
  },
  components: {
    countTo,
    videoPlayer
  },
  created() {
    this._fetchNews();
    this.getBanner();
  },
  mounted() {
    window.addEventListener("scroll", this.countTo_start, true);
  },
  methods: {
    // 格式化时间
    dateFormat(val) {
      return moment(Number(val)).format("YYYY-MM-DD");
    },
    // 拉取新闻数据
    _fetchNews() {
      fetchNews(this.params).then(res => {
        this.news_over_view = res.data.results;
        for (let i = 0; i < this.news_over_view.length; i++) {
          this.news_over_view[i].journalism_time = this.dateFormat(
            this.news_over_view[i].journalism_time
          );
        }
      });
    },
    // 获取banner
    getBanner() {
      fetchBanner(this.bannerParams).then(res => {
        this.banner_image = res.data.results;
      });
    },
    to_detail(params) {
      this.$router.push({
        name: "newsdetail",
        params
      });
    },
    to_join() {
      this.$router.push({
        name: "join"
      });
    },
    // 挂载滚动监听 实现数字滚动
    countTo_start() {
      let distance = this.$refs.background.offsetTop;
      let total = document.documentElement.scrollTop;
      // eslint-disable-next-line no-console
      // console.log(distance, total);
      if (total >= distance - 400) {
        this.countTo_item.forEach((item, index) => {
          item.end_val = this.endval[index];
        });
      }
    }
  },
  destroyed() {
    window.removeEventListener("scroll", this.countTo_start, true);
  }
};
</script>

<style lang="less" scoped>
.home_page {
  .banner {
    width: 100%;
    height: 550px;
    background-color: #e3e3e3;
    position: relative;

    &:hover /deep/ .el-carousel__arrow {
      animation: show 0.7s forwards;

      @keyframes show {
        to {
          opacity: 1;
        }
      }
    }

    & /deep/ .el-image {
      width: inherit;
    }
    // 修改轮播图的默认箭头样式
    & /deep/ .el-carousel__arrow {
      background: transparent;
      opacity: 0;
      animation: invisible 0.3s;

      @keyframes invisible {
        from {
          opacity: 1;
        }
      }
    }
    & /deep/ .el-icon-arrow-left {
      box-shadow: 0 0 0 10px transparent;
      border-radius: 50%;

      // &:hover {
      //   animation: effect 0.7s;

      //   @keyframes effect {
      //     from {
      //       box-shadow: 0 0 0 0 hsl(#f1f1f1, 100%, 41%);
      //     }
      //   }
      // }
    }
    & /deep/ .el-icon-arrow-right {
      box-shadow: 0 0 0 10px transparent;
      border-radius: 50%;

      // &:hover {
      //   animation: effect 0.7s;

      //   @keyframes effect {
      //     from {
      //       box-shadow: 0 0 0 0 hsl(#f1f1f1, 100%, 41%);
      //     }
      //   }
      // }
    }
    & /deep/ .el-carousel__container {
      position: relative;
    }
    & /deep/ .el-carousel__arrow--left {
      position: absolute;
      left: 15%;
      font-size: 50px;
    }
    & /deep/ .el-carousel__arrow--right {
      position: absolute;
      right: 15%;
      font-size: 50px;
    }
    & /deep/ .el-carousel__indicators {
      position: absolute;
      top: 87%;
      left: 50%;
    }
    & /deep/ .el-carousel__button {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
  }
}

.content {
  width: 1198px;
  margin: auto;

  .investment {
    margin-top: 65px;

    .p1 {
      cursor: default;
      margin: 0;
      width: 100%;
      // height: 17px;
      font-size: 36px;
      font-weight: bold;
      color: #333333;
      text-align: center;
    }

    .p2 {
      cursor: default;
      margin: 0;
      width: 100%;
      // height: 8px;
      line-height: 14px;
      font-size: 16px;
      font-weight: 400;
      margin-top: 17px;
      color: #595757;
      text-align: center;
    }

    .show {
      // width: 100%;
      margin-top: 33px;
      display: flex;
      flex-direction: row;
      // justify-content: space-between;

      .table {
        .line01 {
          display: flex;
          flex-direction: row;
          margin-bottom: 5px;

          .line01_item {
            cursor: default;
            text-align: center;
            width: 196px;
            height: 56px;
            line-height: 56px;
            font-size: 18px;
            margin-right: 2px;
            color: #525252;
            font-weight: bold;
            background-color: #dbdbdb;
            // margin: auto;

            &:last-child {
              margin-right: 0;
            }
          }

          .width_special_item {
            cursor: default;
            text-align: center;
            width: 167px;
            height: 56px;
            line-height: 56px;
            font-size: 18px;
            margin-right: 2px;
            color: #525252;
            font-weight: bold;
            background-color: #dbdbdb;
            // margin: auto;

            &:last-child {
              margin-right: 0;
            }
          }

          .special_item {
            cursor: default;
            text-align: center;
            width: 196px;
            height: 56px;
            line-height: 16px;
            padding-top: 18px;
            box-sizing: border-box;
            font-size: 18px;
            margin-right: 2px;
            color: #525252;
            font-weight: bold;
            background-color: #dbdbdb;

            span {
              font-size: 14px;
            }
          }
        }

        .line03 {
          display: flex;
          flex-direction: row;
          margin-bottom: 5px;

          .line01_item {
            cursor: default;
            text-align: center;
            width: 196px;
            height: 56px;
            line-height: 56px;
            font-size: 18px;
            margin-right: 2px;
            color: #525252;
            font-weight: bold;
            background-color: #f1f1f1;
            // margin: auto;

            &:last-child {
              margin-right: 0;
            }
          }

          .width_special_item {
            cursor: default;
            text-align: center;
            width: 167px;
            height: 56px;
            line-height: 56px;
            font-size: 18px;
            margin-right: 2px;
            color: #525252;
            font-weight: bold;
            background-color: #f1f1f1;
            // margin: auto;

            &:last-child {
              margin-right: 0;
            }
          }

          .special_item {
            cursor: default;
            text-align: center;
            width: 196px;
            height: 56px;
            line-height: 16px;
            padding-top: 18px;
            box-sizing: border-box;
            font-size: 18px;
            margin-right: 2px;
            color: #525252;
            font-weight: bold;
            background-color: #f1f1f1;

            span {
              font-size: 14px;
            }
          }
        }

        .line08 {
          display: flex;
          flex-direction: row;
          margin-bottom: 2.5px;
          &:last-child {
            margin-bottom: 0;
          }

          .line01_item {
            cursor: default;
            text-align: center;
            width: 196px;
            height: 56px;
            line-height: 56px;
            font-size: 18px;
            margin-right: 2px;
            color: #fff;
            font-weight: bold;
            background-color: #e83929;
            // margin: auto;

            &:last-child {
              margin-right: 0;
            }
          }

          .width_special_item {
            cursor: default;
            text-align: center;
            width: 167px;
            height: 56px;
            line-height: 56px;
            font-size: 18px;
            margin-right: 2px;
            color: #ffffff;
            font-weight: bold;
            background-color: #e83929;
            // margin: auto;

            &:last-child {
              margin-right: 0;
            }
          }
        }
      }

      .tips {
        margin-left: 56px;
        width: 436px;
        height: 541px;
        background: #f1f1f1;

        .img {
          height: 237px;
          width: 100%;
          background: red;
        }

        .warning {
          padding: 29px 39px 0px 39px;
          height: fit-content;

          .line01 {
            cursor: default;
            font-size: 18px;
            font-weight: 500;
          }

          .content {
            margin: 0;
            margin-top: 22px;
            margin-bottom: 38px;

            p {
              cursor: default;
              cursor: default;
              margin-bottom: 0;
              margin-top: 6px;
              font-size: 16px;
              font-weight: 300;
              color: #5b5b5b;
            }
            p:first-child {
              margin-top: 0px;
            }
            p:last-child {
              margin-bottom: 0px;
            }
          }

          .more {
            position: relative;
            width: 113px;
            height: 27px;
            font-size: 16px;
            font-weight: 300;
            padding: 2px 15px;
            color: #fff;
            background: #e53832;
            margin-top: 19px;
            text-decoration: none;
            // border-radius: 5px;
            box-shadow: 0 0 0px 5px hsl(#e53832, 0%, 41%);
            animation: shadow 2s infinite;

            @keyframes shadow {
              from {
                box-shadow: 0 0 5px 5px hsl(#e53832, 100%, 41%);
                border-radius: 3px;
              }
            }

            &::after {
              content: "»";
              position: absolute;
              right: 0;
              top: 50%;
              transform: translate(-50%, -50%);
              animation: effect 1s ease-in-out infinite;

              @keyframes effect {
                20% {
                  transform: translate(-90%, -50%);
                }
                40% {
                  transform: translate(-60%, -50%);
                }
                60% {
                  transform: translate(-90%, -50%);
                }
                10% {
                  transform: translate(-50%, -50%);
                }
              }
            }
          }
        }
      }
    }
  }

  .background {
    margin-top: 68px;
    .p1 {
      cursor: default;
      margin: 0;
      width: 100%;
      // height: 17px;
      font-size: 36px;
      font-weight: bold;
      color: #333333;
      text-align: center;
    }

    .p2 {
      cursor: default;
      margin: 0;
      width: 100%;
      // height: 8px;
      line-height: 27px;
      font-size: 16px;
      font-weight: 400;
      margin-top: 22px;
      color: #595757;
      text-align: center;
      margin-bottom: 47px;
    }

    .simpleDetail {
      display: flex;
      justify-content: space-between;
      padding: 0 69px;
      margin-bottom: 50px;

      .detailStyle {
        cursor: default;
        display: flex;
        flex-direction: row;
        text-align: center;

        div {
          font-size: 43px;
          font-weight: 500;
          color: #9e7c4f;
          margin-right: 100px;

          &:last-child {
            margin-right: 0;
          }

          div {
            display: block;
            box-sizing: border-box;
            width: 190px;
            // height: 33px;
            line-height: 27px;
            padding: 7px 30px 8px 30px;
            border-radius: 5px;
            font-size: 18px;
            font-weight: 400;
            color: #ffffff;
            background: #b5b5b5;
          }
        }
      }
    }

    .video {
      width: 100%;
      height: 288px;
      background: #000;

      & /deep/ .video-player {
        width: 100%;
        height: 100%;
      }

      & /deep/ .video-js {
        width: 100%;
        height: 100%;
        padding: 0;
      }

      & /deep/ .vjs-tech {
        width: 100%;
        height: 100%;
      }
    }
  }

  .news {
    margin-top: 68px;
    .p1 {
      cursor: default;
      margin: 0;
      width: 100%;
      // height: 17px;
      font-size: 36px;
      font-weight: bold;
      color: #333333;
      text-align: center;
    }

    .p2 {
      cursor: default;
      width: 100%;
      // height: 8px;
      line-height: 14px;
      font-size: 16px;
      font-weight: 400;
      margin-top: 22px;
      color: #595757;
      text-align: center;
    }

    .news_over_view {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;

      .tips {
        position: relative;
        width: 383px;
        height: 453px;
        background: #f1f1f1;

        .img {
          height: 213px;
          width: 100%;
          background: red;
          img {
            width: 100%;
            height: 100%;
          }
        }

        .warning {
          padding: 33px 24px 0px 24px;
          height: fit-content;

          .line01 {
            cursor: default;
            font-size: 18px;
            font-weight: 500;
          }

          .content {
            cursor: default;
            width: auto;
            margin: 0;
            margin-top: 22px;
            margin-bottom: 39px;
            line-height: 27px;
            font-weight: 300;
            color: #5b5b5b;
          }
        }
        .date_more {
          cursor: default;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          display: flex;
          // position: relative;
          background: #e8e8e8;

          .date {
            width: 100%;
            height: 41px;
            line-height: 41px;
            font-size: 14px;
            font-weight: 300;
            padding: 0 0 0 23px;
          }

          .more {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 113px;
            height: 41px;
            font-size: 14px;
            font-weight: 300;
            color: #fff;
            background: #d83b2a;
            text-decoration: none;
            box-sizing: border-box;
            text-align: center;
            line-height: 41px;
            box-shadow: 0 0 0px 5px hsl(#e53832, 0%, 41%);
            animation: shadow 2s infinite;

            @keyframes shadow {
              from {
                box-shadow: 0 0 5px 5px hsl(#e53832, 100%, 41%);
                border-radius: 3px;
              }
            }

            &::after {
              content: "»";
              position: absolute;
              right: 10%;
              top: 50%;
              transform: translate(-50%, -50%);
              animation: effect 2s ease-in-out infinite;

              @keyframes effect {
                20% {
                  transform: translate(-120%, -50%);
                }
                40% {
                  transform: translate(-60%, -50%);
                }
                60% {
                  transform: translate(-120%, -50%);
                }
                10% {
                  transform: translate(-50%, -50%);
                }
              }
            }
          }
        }
      }
    }
  }

  .contact {
    margin-top: 68px;
    .p1 {
      margin: 0;
      width: 100%;
      // height: 17px;
      font-size: 36px;
      font-weight: bold;
      color: #333333;
      text-align: center;
    }

    .p2 {
      width: 100%;
      // height: 8px;
      line-height: 14px;
      font-size: 16px;
      font-weight: 400;
      margin-top: 22px;
      margin-bottom: 0;
      text-align: center;
    }

    .contact_info {
      margin-top: 34px;
      display: flex;
      justify-content: space-between;

      p {
        margin: 0;
      }

      img {
        width: 418px;
        height: 418px;
        background: #000;
      }

      .info {
        font-size: 16px;
        font-weight: 300;

        .info_p1 {
          margin-top: 25px;
          font-size: 18px;
          font-weight: 500;
        }
        .info_p2 {
          margin-top: 11px;
          font-size: 18px;
          font-weight: 500;
        }
        .info01 {
          margin-top: 53px;
          display: flex;
          justify-content: space-between;

          div {
            padding: 0 0 17px 0;
            border-bottom: 1px solid #5b5b5b;

            input {
              border: 0px solid #5b5b5b;
              padding: 0;
              outline: none;
            }
          }
        }

        .info02 {
          margin-top: 41px;

          div {
            padding: 0 0 17px 0;
            border-bottom: 1px solid #5b5b5b;

            input {
              width: 659px;
              border: 0px solid #5b5b5b;
              padding: 0;
              outline: none;
            }
          }
        }

        .upload {
          margin-top: 47px;
          width: 100%;
          height: 55px;
          line-height: 55px;
          text-align: center;
          background: #d83b2a;
          font-size: 16px;
          font-weight: 300;
          color: #ffffff;
        }

        .statement {
          margin-top: 36px;
          font-size: 16px;
          font-weight: 300;
          padding: 0 0 0 3px;
        }
      }
    }
  }
}
</style>
